<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<jsp:include page="/WEB-INF/page/layout/cssjs.jsp" /> 
</head>
<body>
<div style="margin-left: 20px">
<h1>测试主页面-测试上传功能</h1>
   <h1>测试下按钮绑定上传功能----例子:上传封面</h1>
   <div>
   <img  id="imgUrl" src="${webPath}/img/logo5.png" />
   <button id="kdUploadSelect" class="am-btn am-btn-success" >上传文件</button>
   </div>
   
   <hr/>
   <h1>测试下任何元素绑定上传功能---例子：上传头像</h1>
    <img  style="width: 70px;height: 70px" id="kdImg" src="${webPath}/img/person_head.jpg"  class="am-circle"/>
   <hr/>
   <h1>测试下预览上传</h1>
   <div class="hp-upload-div" id="kdViewDiv"></div>
   <hr/>
   <h1>测试下自定义区域 带css--多实例</h1>
   <div class="hp-upload-div" id="customkdViewDiv"></div>
   </div>
  <script type="text/javascript">
  $(function(){
	  // $.post(url,data,function(){})
	  //  按钮绑定
 	  $.hpUpload("${webPath}/common/upload/uploadFile.hp",{"path":"/kd/img"},function(json){
		  console.log(json);
		  $("#imgUrl").attr('src',imgPath+json.data);
	  }); 
	    //测试下任何元素绑定
	   $.hpUpload("${webPath}/common/upload/uploadFile.hp",{"path":"/kd/img"},function(json){
		  console.log(json);
		  $("#kdImg").attr('src',imgPath+json.data);
	  },false,"#kdImg");// 选择多个
	    
		//  动态  改变    url 地址
		//$("#kdImg").data("ajaxUpload").changeUrl('${webPath}/uploadAction_uploadFile.hp');
		//  动态  改变    data 上传的参数
		//var changeData={"path":"/kd2/img"};
		//$("#kdImg").data("ajaxUpload").changeData(changeData);
		//$("#kdImg").getHpUpload().changeData(changeData);
	
	    // 预览上传 批量上传 要加s
	    var url="${webPath}/common/upload/uploadFiles.hp"; // 提交目标地址
	    var data={"path" : "/upload/headImg2"};
	    $.hpUpload_plus.viewUpload(url,data,function(json){
	    	           // 上传完成之后
	    			  layer.msg('上传成功1')
				      console.log(json)
	    });
	    
	    
	    // 预览上传 批量上传 要加s
	    var url="${webPath}/common/upload/uploadFiles.jhtml"; // 提交目标地址
	    var data={"path" : "/upload/headImg3"};
	    $.hpUpload_plus.viewUploadArea("#customkdViewDiv",url,data,function(json){
	    	           // 上传完成之后
	    			  layer.msg('上传成功1')
				      console.log(json)
	    });
	  
		
		
  });
  
  </script>
   
</body>
</html>